<template>
  <div style="font-size: 14px;">
    <footer id="footer">
      <van-tabbar v-model="active" @change="onChange" active-color="#ee0a24" inactive-color="#000">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="points">分类</van-tabbar-item>
        <van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="contact">我的</van-tabbar-item>
      </van-tabbar>
    </footer>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import {
    Tabbar,
    TabbarItem
  } from 'vant';

  export default {

    components: {
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem
    },

    data() {
      return {
        active: 0,
        path:''
      };
    },

    computed: {
      ...mapGetters([
        'headerAndFooter'
      ])
    },

    watch:{
      "headerAndFooter"(){//监控头部、底部
        this.path = this.$router.currentRoute.path;
      }
    },

    mounted() {
      this.getActive();
    },

    methods: {
      // 选中的菜单
      getActive(){
        let path = this.$router.currentRoute.path;
        if(path === '/index'){
          this.active = 0;
        }else if(path === '/type'){
          this.active = 1;
        }else if(path === '/cart'){
          this.active = 2;
        }else if(path === '/user'){
          this.active = 3;
        }
      },

      selMenu(path){//切换菜单
        if(this.path === path){
          return;
        }
        this.path = path;
        this.$router.push({path: path});
      },

      //切换菜单
      onChange(index) {
        let path = '';
        if(index === 0){
          path = '/index'
        }else if(index === 1){
          path = '/type'
        }else if(index === 2){
          path = '/cart'
        }else if(index === 3){
          path = '/user'
        }
        this.selMenu(path);
      },

    }
  };
</script>

<style scoped>
  #footer, #footer a {
    display: flex;
    align-items: center;
  }

  #footer {
    width: 100%;
    height: 3.2rem;
    font-size: .7rem;
    background: #fff;
    box-shadow: 0 0.2rem 1rem 0.13rem rgba(0,0,0,.12);
    justify-content: space-around;
    position: fixed;
    z-index: 2;
    left: 0;
    bottom: 0;
  }
</style>
